<template>
<div class="item" @mouseenter="chooseItem(true)" @mouseleave="chooseItem(false)" :style="{color:color,backgroundColor:bgC}">
  <div ><el-checkbox v-model="todo.isCheck" ></el-checkbox>{{todo.title}}</div>
  <div><el-button v-if="showBtn" type="danger" size="mini" @click="deleteItem">删除</el-button></div>
</div>
</template>

<script lang="ts">
import { defineComponent, ref, inject } from "vue";
import {Todo} from "@/types/todo.ts"
export default defineComponent({
  name:'',
  props:{
    todo:{
      type:Object as ()=>Todo,
      required:true
    },
    index:{
      type:Number
    },
    deleteI:{
      type:Function,
      required:true
    }
  },
  setup(props){
    const showBtn = ref(false)
    const color = ref("#606266")
    const bgC = ref("#fff")
    const chooseItem = (flag:boolean)=>{
      if(flag){
        color.value = "#fff";
        bgC.value = "pink"
      }else{
         color.value = "#606266";
         bgC.value = "#fff"
      }
      showBtn.value = flag;
    }
    const deleteItem = () =>{
      props.deleteI(props.index)
    }
    return{
      chooseItem,
      showBtn,
      color,
      bgC,
      deleteItem
    }
  }
})
</script>

<style lang="less" scoped>
.item{
  margin:10px 0;
  display:flex;
  justify-content: space-between;
  box-sizing:border-box;
  padding:5px 15px;
  cursor: pointer;
  .el-checkbox{
    margin-right:5px;
    height:28px;
    line-height:28px;
  }
}
</style>
